<template>
  <div class="video-player">
    <video
      style="width: 100%; height: 250px; object-fit: cover;"
      ref="videoPlayer"
      autoplay
      muted
      playsinline
      loop
    >
      <source :src="videoSrc" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
</template>

<script>
import video from './../images/video.mp4';

export default {
  name: 'VideoComponent',
  data() {
    return {
      videoSrc: video,
    };
  },
  mounted() {
    this.playVideo();
  },
  methods: {
    playVideo() {
      const videoElement = this.$refs.videoPlayer;
      if (videoElement) {
        videoElement.play().catch(error => {
          console.error('Auto play failed', error);
        });
      }
    }
  }
};
</script>

<style scoped>
.video-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
</style>
